<template>
  <div class="home" ref="homeRef">
    <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" offset="300" @load="onLoad">


    </van-list> -->
    <home-nav-bar />

  <TestNarBar>
    <template #left>
      <div class="left-narbar">
        <img src="@/assets/img/favor/favor.png" alt="">
      </div> 
    </template>
     <template #right>
      <div class="left-narbar">
        <img src="@/assets/logo.svg" alt="">
      </div> 
    </template>
  </TestNarBar>
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="">
    </div>

    <home-search-box />
    <home-categories />
    <div class="search-bar" v-if="isShowSearchBar">
      <search-bar />
    </div>
    <home-content />

  </div>
</template>

<script setup>
import { watch, ref, computed, onActivated } from 'vue';

import useHomeStore from '@/stores/modules/home'
import homeNavBar from "./cpns/home-nav-bar.vue";
import homeSearchBox from "./cpns/home-search-box.vue";
import homeCategories from './cpns/home-categories.vue'

import homeContent from './cpns/home-content.vue'
import useScroll from '@/hooks/useScroll';
import SearchBar from '@/components/search-bar/search-bar.vue'

import TestNarBar from './test-narbar.vue'

const homeStore = useHomeStore()
homeStore.fetchHotSuggestData()
homeStore.fetchCategoriesData()
homeStore.fetchHouselistData()

// const loading = ref(false);
// const finished = ref(false);

// const onLoad = () => {
//   homeStore.fetchHouselistData()
//   finished.value = false
// }

const homeRef = ref()

const { isReachBottm, scrollTop } = useScroll(homeRef)
watch(isReachBottm, (newValue) => {
  if (newValue) {
    homeStore.fetchHouselistData()
    isReachBottm.value = false
  }
})

const isShowSearchBar = computed(() => {
  return scrollTop.value >= 350
})

onActivated(() => {
  homeRef.value.scrollTo({
    top: scrollTop.value
  })
})

</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 120px;
}

.banner {
  img {
    width: 100%;
  }
}

.search-bar {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  left: 0;
  background-color: #fff;
  height: 90px;
  padding: 32px 32px 20px;
}

.left-narbar {
  width: 58px;
  height: 50px;
  
  margin: auto;
  img {
    width: 100%;
  }
}
</style>